<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <div class="wrapper">
        <div class="layui-panel panel">
            <div class="layui-tab layui-tab-brief" lay-filter="tab">
                <ul class="layui-tab-title">
                    <li class="layui-this" lay-id="tabList">栏目管理</li>
                    <li id="tabForm" lay-id="tabForm" style="display: none;">新增</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <table class="layui-hide" id="treeTable"></table>

                        <script type="text/html" id="TB">
                            <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i> 新增</a>
                            <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="updateCache"><i class="layui-icon layui-icon-refresh"></i> 更新栏目缓存</a>
                        </script>

                        <script type="text/html" id="Type">
                            <span class="layui-badge-rim">
                            {{# if (d.type == 0) { }}
                            内容
                            {{# } else if (d.type == 1) { }}
                            单页
                            {{# } else if (d.type == 2) { }}
                            链接
                            {{# } }}
                            </span>
                        </script>

                        <script type="text/html" id="Menu">
                            <input type="checkbox" name="menu" value="{{= d.id }}" title="是|否" lay-skin="switch" lay-filter="menu" {{= d.menu > 0 ? "checked" : "" }}>
                        </script>

                        <script type="text/html" id="OPE">
                            <a lay-event="edit">编辑</a>
                            <span class="ope-delimiter">|</span>
                            <a lay-event="del">删除</a>
                        </script>
                    </div>
                    <div class="layui-tab-item">
                        <form class="layui-form scms-form" id="form" lay-filter="form">  
                            <input type="input" name="id" value="0" style="display: none;">
                            <div class="layui-form-item">
                                <label class="layui-form-label required">所属栏目：</label>
                                <div class="layui-input-block">
                                    <select name="pid">
                                        <option value="0">顶级栏目</option>
                                        {foreach $column as $v}
                                        <option value="{$v.id}">{:str_repeat('&nbsp;&nbsp;&nbsp;&nbsp;', $v.level)}{$v.name}</option>
                                        {/foreach}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">栏目类型：</label>
                                <div class="layui-input-block">
                                    <select name="type">
                                        <option value="0">内容</option>
                                        <option value="1">单页</option>
                                        <option value="2">链接</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">链接地址：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="url" value="" placeholder="请输入链接地址" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">栏目名称：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" value="" lay-verify="required" placeholder="请输入栏目名称" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">栏目图片：</label>
                                <div class="layui-input-block">
                                    <div class="layui-input-group" style="width: 100%;">
                                        <div class="layui-input-prefix" style="padding: 0; width: 180px;">
                                            <div class="layui-btn-group">
                                                <button type="button" class="layui-btn layui-btn-primary" id="pic_upload"><i class="layui-icon layui-icon-upload-drag"></i> 上传</button>
                                                <button type="button" class="layui-btn layui-btn-primary" id="pic_preview"><i class="layui-icon layui-icon-eye"></i> 预览</button>
                                            </div>
                                        </div>
                                        <input type="text" name="pic" value="" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">排序：</label>
                                <div class="layui-input-block">
                                    <input type="number" name="sort" value="0" lay-verify="required" placeholder="请输入排序" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">导航显示：</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="menu" value="1" title="是" checked>
                                    <input type="radio" name="menu" value="0" title="否">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">标题：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="title" value="" placeholder="请输入标题" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">关键字：</label>
                                <div class="layui-input-block">
                                    <textarea name="keywords" placeholder="请输入关键字" class="layui-textarea"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">描述：</label>
                                <div class="layui-input-block">
                                    <textarea name="description" placeholder="请输入描述" class="layui-textarea"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">栏目页：</label>
                                <div class="layui-input-block">
                                    <select name="tpl_column">
                                        <option value="">请选择栏目页模板</option>
                                        {foreach :column_tpl() as $v}
                                        <option value="{$v.value}">{$v.title}</option>
                                        {/foreach}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">内容页：</label>
                                <div class="layui-input-block">
                                    <select name="tpl_content">
                                        <option value="">请选择内容页模板</option>
                                        {foreach :column_tpl() as $v}
                                        <option value="{$v.value}">{$v.title}</option>
                                        {/foreach}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" id="save" lay-filter="save" lay-submit>保存</button>
                                    <a class="layui-btn layui-btn-primary" onclick="layui.element.tabChange('tab', 'tabList')">取消</i></a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script src="/static/layui/layui.js"></script>
<script>
layui.use(['jquery'], function() {
    var $ = layui.jquery,
        form = layui.form,
        element = layui.element,
        treeTable = layui.treeTable,
        upload = layui.upload;

    element.on('tab(tab)', function(obj) {
        document.getElementById('form').reset();
        $('#tabForm').html('<i class="layui-icon layui-icon-add-1"></i> 新增');
        $('#tabForm').css('display', obj.index ? 'inline-block' : 'none');
    });

    treeTable.render({
        id: 'treeTable',
        elem: '#treeTable',
        url: "{:url('admin/column/column')}",
        method: 'post',
        toolbar: '#TB',
        defaultToolbar: ['filter', 'exports', 'print'],
        page: false,
        cols: [[
            // {type:'checkbox', fixed: 'left'},
            {field: 'sort', title: '排序', width: 60, edit: 'text', align: 'center'},
            {field: 'id', title: 'ID', width: 80, align: 'center'},
            {field: 'name', title: '栏目名称', templet: function(d) { return '<a href="/column/' + d.id + '.html" target="_blank" class="layui-font-14"> ' + d.name + '</a>';}},
            {title: '栏目页模板', templet: function(d) { return d.tpl_column + '.html';}},
            {title: '内容页模板', templet: function(d) { return d.tpl_content + '.html';}},
            {field: 'type', title: '类型', width: 80, templet: '#Type', align: 'center'},
            {field: 'menu', title: '导航显示', width: 100, templet: '#Menu', align: 'center'},
            {title: '操作', width: 100, fixed: 'right', templet: '#OPE', align: 'center'}
        ]],
        height: 'full-141',
        // skin: 'line',
        tree: {
            view: {
                showIcon: false,
                dblClickExpand: false,
                expandAllDefault: true,
            },
        }
    });

    treeTable.on('toolbar(treeTable)', function(obj) {
        if (obj.event === 'add') {
            element.tabChange('tab', 'tabForm');
        } else if (obj.event === 'updateCache') {
            var loadIndex = layer.load();
            $.get("{:url('admin/column/updatecache')}", function(res) {
                layer.close(loadIndex);
                if (res.code > 0) {
                    layer.alert(res.msg, {icon: 2});
                } else {
                    layer.msg(res.msg, {time: 500});
                }
            });
        }
    });

    treeTable.on('tool(treeTable)', function(obj) {
        if (obj.event === 'edit') {
            element.tabChange('tab', 'tabForm');
            $('#tabForm').html('<i class="layui-icon layui-icon-edit"></i> 编辑');

            form.val('form', {
                'id': obj.data.id,
                'pid': obj.data.pid,
                'type': obj.data.type,
                'url': obj.data.url,
                'name': obj.data.name,
                'pic': obj.data.pic,
                'sort': obj.data.sort,
                'menu': obj.data.menu,
                'title': obj.data.title,
                'keywords': obj.data.keywords,
                'description': obj.data.description,
                'tpl_column': obj.data.tpl_column,
                'tpl_content': obj.data.tpl_content,
            });
        } else if (obj.event === 'del') {
            layer.confirm('确定要删除【' + obj.data.name + '】吗？', {icon: 3}, function (index) {
                var loadIndex = layer.load();
                $.post("{:url('admin/column/columndel')}", {'id': obj.data.id}, function(res) {
                    layer.close(loadIndex);
                    if (res.code > 0) {
                        layer.alert(res.msg, {icon: 2});
                    } else {
                        layer.msg(res.msg, {time: 500}, function() {
                            location.reload();
                        });
                        // treeTable.reloadData('treeTable');
                    }
                });
                layer.close(index);
            });
        }
    });
    
    treeTable.on('edit(treeTable)', function(obj) {
        var loadIndex = layer.load();
        $.post("{:url('admin/column/columnSort')}", {'id': obj.data.id, 'sort': obj.value}, function(res) {
            layer.close(loadIndex);
            if (res.code > 0) {
                layer.alert(res.msg, {icon: 2});
            } else {
                layer.msg(res.msg, {time: 500});
                treeTable.reloadData('treeTable');
            }
        });
    });

    form.on('switch(menu)', function(obj){
        var loadIndex = layer.load();
        $.post("{:url('admin/column/columnMenu')}", {'id': this.value, 'menu': obj.elem.checked ? 1 : 0}, function(res) {
            layer.close(loadIndex);
            if (res.code > 0) {
                layer.alert(res.msg, {icon: 2});
            } else {
                layer.msg(res.msg, {time: 500});
                treeTable.reloadData('treeTable');
            }
        });
    });

    form.on('submit(save)', function(obj) {
        var postData = obj.field;
        var loadIndex = layer.load();
        $.post("{:url('admin/column/columnsave')}", postData, function(res) {
            layer.close(loadIndex);
            if (res.code > 0) {
                layer.alert(res.msg, {icon: 2});
            } else {
                layer.msg(res.msg, {time: 500}, function() {
                    location.reload();
                });
                // element.tabChange('tab', 'tabList');
                // treeTable.reloadData('treeTable');
            }
        });
        return false;
    });

    upload.render({
        elem: '#pic_upload',
        url: "{:url('admin/index/upload')}",
        accept: 'images',
        acceptMime: 'image/*',
        done: function(res) {
            if (res.code > 0) {
                layer.alert(res.msg, {icon: 2});
            } else {
                layer.msg(res.msg, {time: 500});
                $('input[name="pic"]').val(res.data.src);
            }
        }
    });

    $('#pic_preview').click(function() {
        layer.photos({ photos: { 'data': [{ 'src': $('input[name="pic"]').val() }]} });
    });
});
</script>